<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>首页-中粮奥运活动</title>
        <meta name="author" content="Shengzhi Cheung">
        <link rel="stylesheet" href="../css/main.css">
    </head>

    <body id="home">
        <div id="wrap">
            <div class="wrap-in">

                <div id="header">
                    <div class="head-in">
                        <div class="banner">
                            <a href="#" class="link-zl">中粮</a>
                            <a href="#" class="link-jblm">金币联盟</a>
                        </div>
                        <!-- /头图 -->

                        <div class="nav">
                            <ul>
                                <li><a class="nav-home" href="index.html">首页</a></li>
                                <li><a class="nav-records" href="my_activity_record.html">我的活动记录</a></li>
                                <li><a class="nav-intro" href="activity_introduction.html">活动详情</a></li>
                                <li><a class="nav-extra" href="extra_suprize.html">额外“金”喜</a></li>
                            </ul>
                        </div>
                        <!-- /主导航 -->

                    </div>

                    <div class="status"><i class="hundred-thousand">8</i><i class="ten-thousand">8</i><i class="thousand">8</i><i class="hundred">8</i><i class="ten">8</i><i class="bits">8</i></div>
                    <!-- /参加人数 -->
                </div>
                <!-- /头部 -->

                <div id="container">
                    <div class="layout">
                        <div class="main">
                            <div class="main-cont">
                                <div class="focus">
                                    <ul class="focus-tab" id="focusPicTab">
                                        <li>1</li>
                                        <li>2</li>
                                        <li>3</li>
                                    </ul>
                                    <div class="focus-pic" id="focusPic">
                                        <div class="pic-container" id="focusPicContent">
                                            <a href="#"><img src="../img_demo/focus_pic.jpg" /></a>
                                            <a href="#"><img src="../img_demo/focus_pic.jpg" /></a>
                                            <a href="#"><img src="../img_demo/focus_pic.jpg" /></a>
                                        </div>
                                    </div>
                                </div>
                                <!-- /焦点图 -->

                                <div class="flows">
                                    <div class="flow1">购买中粮<br />活动产品</div>
                                    <div class="flow2"><a href="#">注册</a>/<a href="#">登录</a><br />金币联盟</div>
                                    <div class="flow3">输入金币<br />码积金币</div>
                                    <div class="flow4">成为中粮会员获得抽奖机会<br />兑换联盟丰厚好礼</div>
                                </div>
                                <!-- /活动流程 -->

                                <div class="brands">
                                    <div class="tab" id="brandTabs">
                                        <h3>活动品牌</h3>
                                        <ul>
                                            <li class="active"><img src="../img/tab_flm.png" alt="福临门"></li>
                                            <li><img src="../img/tab_mzz.png" alt="美滋滋"></li>
                                            <li><img src="../img/tab_wgdc.png" alt="五谷道场"></li>
                                            <li><img src="../img/tab_jd.png" alt="金帝"></li>
                                            <li><img src="../img/tab_cc.png" alt="长城葡萄酒"></li>
                                        </ul>
                                    </div>
                                    <div class="cont" style="display:block;">
                                        <div class="slides">
                                            <div class="slides-cont" id="brandMarquee">
                                                <ul id="brandMarqueeContent">
                                                    <li>
                                                        <img src="../img_demo/flm01.jpg" alt="美滋滋爱心分享">
                                                        <span>美滋滋爱心分享</span>
                                                        <span class="value">积<em>50</em>金币</span>
                                                    </li>
                                                    <li>
                                                        <img src="../img_demo/flm01.jpg" alt="美滋滋爱心分享">
                                                        <span>美滋滋爱心分享</span>
                                                        <span class="value">积<em>50</em>金币</span>
                                                    </li>
                                                    <li>
                                                        <img src="../img_demo/flm01.jpg" alt="美滋滋爱心分享">
                                                        <span>美滋滋爱心分享</span>
                                                        <span class="value">积<em>50</em>金币</span>
                                                    </li>
                                                    <li>
                                                        <img src="../img_demo/flm01.jpg" alt="美滋滋爱心分享">
                                                        <span>美滋滋爱心分享</span>
                                                        <span class="value">积<em>50</em>金币</span>
                                                    </li>
                                                    <li>
                                                        <img src="../img_demo/flm01.jpg" alt="美滋滋爱心分享">
                                                        <span>美滋滋爱心分享</span>
                                                        <span class="value">积<em>50</em>金币</span>
                                                    </li>
                                                    <li>
                                                        <img src="../img_demo/flm01.jpg" alt="美滋滋爱心分享">
                                                        <span>美滋滋爱心分享</span>
                                                        <span class="value">积<em>50</em>金币</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <a href="#" class="prev-s1" id="brandPrev">上一个</a>
                                        <a href="#" class="next-s1" id="brandNext">下一个</a>
                                    </div>
                                    <div class="guide">
                                        <h3>去哪里购买</h3>
                                        <ul>
                                            <li><i>1</i>全国主要卖场和超市</li>
                                            <li><i>2</i>天猫<a href="#">中粮食品旗舰店</a></li>
                                            <li><i>3</i>中粮<a href="#">我买网</a></li>
                                        </ul>
                                    </div>
                                    <!-- /去哪里买 -->
                                </div>
                                <!-- /活动品牌 -->

                            </div>
                        </div>
                        <div class="aside">
                            <div class="login">
                                <div class="bd">
                                    <a href="#" class="btn-login">登录金币联盟参与活动</a>
                                </div>
                            </div>
                            <!-- /登录 -->

                            <div class="integral">
                                <ul>
                                    <li>
                                        <div class="pic"><img src="../img_demo/tem_46x42.jpg" /></div>
                                        <div class="info">
                                            <div class="user">
                                                <span class="time">1小时前</span>
                                                <em>1233****124</em>
                                            </div>
                                            <div class="desc">
                                                <span class="coins">获<i>100</i>金币</span>
                                                <p>购买福临门金龙调和油</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pic"><img src="../img_demo/tem_46x42.jpg" /></div>
                                        <div class="info">
                                            <div class="user">
                                                <span class="time">1小时前</span>
                                                <em>1233****124</em>
                                            </div>
                                            <div class="desc">
                                                <span class="coins">获<i>100</i>金币</span>
                                                <p>购买福临门金龙调和油</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pic"><img src="../img_demo/tem_46x42.jpg" /></div>
                                        <div class="info">
                                            <div class="user">
                                                <span class="time">1小时前</span>
                                                <em>1233****124</em>
                                            </div>
                                            <div class="desc">
                                                <span class="coins">获<i>100</i>金币</span>
                                                <p>购买福临门金龙调和油</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pic"><img src="../img_demo/tem_46x42.jpg" /></div>
                                        <div class="info">
                                            <div class="user">
                                                <span class="time">1小时前</span>
                                                <em>1233****124</em>
                                            </div>
                                            <div class="desc">
                                                <span class="coins">获<i>100</i>金币</span>
                                                <p>购买福临门金龙调和油</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="pic"><img src="../img_demo/tem_46x42.jpg" /></div>
                                        <div class="info">
                                            <div class="user">
                                                <span class="time">1小时前</span>
                                                <em>1233****124</em>
                                            </div>
                                            <div class="desc">
                                                <span class="coins">获<i>100</i>金币</span>
                                                <p>购买福临门金龙调和油</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!-- /积金币 -->

                            <div class="notice">
                                <div class="hd"><h3>活动公告</h3></div>
                                <div class="bd">
                                    <ul>
                                        <li><span>7-11</span><a href="#">邀请好友参加活动有机会获金喜大礼包</a></li>
                                        <li><span>7-11</span><a href="#">邀请好友参加活动有机会获金喜大礼包</a></li>
                                        <li><span>7-11</span><a href="#">邀请好友参加活动有机会获金喜大礼包</a></li>
                                        <li><span>7-11</span><a href="#">邀请好友参加活动有机会获金喜大礼包</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- /活动公告 -->

                            <div class="ad-aside"><a href="#"><img src="../img_demo/ad_aside.jpg" alt=""></a></div>
                            <!-- /侧栏广告 -->
                        </div>
                    </div>

                    <div class="suprize1">
                        <div class="cont">
                            <div class="info">金币联盟是为广大消费者提供的名优产品联合积金币换礼品平台，只要购买带有<i class="ico-jblm">金币联盟</i>标识的加盟品牌产品，即可联合积金币换好礼！</div>
                            <div class="prize-list">
                                <ul>
                                    <li><div class="pic"><img src="../img/prize01.jpg"></div><span>仅需<em>680</em>个金币</span></li>
                                    <li><div class="pic"><img src="../img/prize02.jpg"></div><span>仅需<em>960</em>个金币</span></li>
                                    <li><div class="pic"><img src="../img/prize03.jpg"></div><span>仅需<em>3200</em>个金币</span></li>
                                    <li><div class="pic"><img src="../img/prize04.jpg"></div><span>仅需<em>9086</em>个金币</span></li>
                                    <li><div class="pic"><img src="../img/prize05.jpg"></div><span>仅需<em>2060</em>个金币</span></li>
                                    <li><div class="pic"><img src="../img/prize06.jpg"></div><span>仅需<em>1699</em>个金币</span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="or1"></div>
                        <div class="or2"></div>
                        <a href="#" class="btn-exchange">兑换更多好礼</a>
                    </div>
                    <!-- /金喜1 -->

                    <div class="suprize2">
                        <div class="timeline" id="dateTabs"><span>7月28日</span><span class="active">7月29日</span><span>7月30日</span><span>7月31日</span><span>8月1日</span><span>8月2日</span><span>8月3日</span><span>8月4日</span><span>8月5日</span><span>8月6日</span><span>8月7日</span><span>8月8日</span><span>8月9日</span><span>8月10日</span><span>8月11日</span><span>8月12日</span><span>8月13日</span></div>
                        <div class="status">比赛日期 <span>第<em>6</em>天</span> 今日已送出<em>588</em>瓶中粮高级葡萄酒</div>
                        <div class="cont">
                            <div class="schedule">
                                <div class="hd">
                                    <span>2010年8月12日</span>
                                    <h3>2012年伦敦奥运重点赛事</h3>
                                </div>
                                <div class="bd">
                                    <table>
                                        <tr>
                                            <td>07:30</td>
                                            <td>田径</td>
                                            <td>男子马拉松决赛</td>
                                        </tr>
                                        <tr>
                                            <td>07:30</td>
                                            <td>田径</td>
                                            <td>男子马拉松决赛</td>
                                        </tr>
                                        <tr>
                                            <td>07:30</td>
                                            <td>田径</td>
                                            <td>男子马拉松决赛</td>
                                        </tr>
                                        <tr>
                                            <td>07:30</td>
                                            <td>田径</td>
                                            <td>男子马拉松决赛</td>
                                        </tr>
                                        <tr>
                                            <td>07:30</td>
                                            <td>田径</td>
                                            <td>男子马拉松决赛</td>
                                        </tr>
                                        <tr>
                                            <td>07:30</td>
                                            <td>田径</td>
                                            <td>男子马拉松决赛</td>
                                        </tr>
                                        <tr>
                                            <td>07:30</td>
                                            <td>田径</td>
                                            <td>男子马拉松决赛</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <!-- /重点赛事 -->

                            <div class="winners">
                                <div class="events" id="eventsList">
                                    <ul id="eventContent">
                                        <li class="active">
                                            <div class="avatar"><img src="../img_demo/avatar.jpg" /></div>
                                            <div class="info">
                                                <p>男子110米跨栏决赛</p>
                                                <p>冠军 刘翔</p>
                                            </div>
                                            <i></i>
                                        </li>
                                        <li>
                                            <div class="avatar"><img src="../img_demo/avatar.jpg" /></div>
                                            <div class="info">
                                                <p>男子110米跨栏决赛</p>
                                                <p>冠军 刘翔</p>
                                            </div>
                                            <i></i>
                                        </li>
                                        <li>
                                            <div class="avatar"><img src="../img_demo/avatar.jpg" /></div>
                                            <div class="info">
                                                <p>男子110米跨栏决赛</p>
                                                <p>冠军 刘翔</p>
                                            </div>
                                            <i></i>
                                        </li>
                                        <li>
                                            <div class="avatar"><img src="../img_demo/avatar.jpg" /></div>
                                            <div class="info">
                                                <p>男子110米跨栏决赛</p>
                                                <p>冠军 刘翔</p>
                                            </div>
                                            <i></i>
                                        </li>
                                        <li>
                                            <div class="avatar"><img src="../img_demo/avatar.jpg" /></div>
                                            <div class="info">
                                                <p>男子110米跨栏决赛</p>
                                                <p>冠军 刘翔</p>
                                            </div>
                                            <i></i>
                                        </li>
                                        <li>
                                            <div class="avatar"><img src="../img_demo/avatar.jpg" /></div>
                                            <div class="info">
                                                <p>男子110米跨栏决赛</p>
                                                <p>冠军 刘翔</p>
                                            </div>
                                            <i></i>
                                        </li>
                                    </ul>
                                </div>
                                <a href="#" class="prev" id="eventPrev">上一个</a>
                                <a href="#" class="next" id="eventNext">下一个</a>
                                <div class="winner-list">
                                    <h3>中奖名单</h3>
                                    <ul>
                                        <li>1398***5555  参与抽奖 <span>中粮葡萄酒500ML一支</span></li>
                                        <li>1398***5555  参与抽奖 <span>中粮葡萄酒500ML一支</span></li>
                                        <li>1398***5555  参与抽奖 <span>中粮葡萄酒500ML一支</span></li>
                                        <li>1398***5555  参与抽奖 <span>中粮葡萄酒500ML一支</span></li>
                                        <li>1398***5555  参与抽奖 <span>中粮葡萄酒500ML一支</span></li>
                                        <li>1398***5555  参与抽奖 <span>中粮葡萄酒500ML一支</span></li>
                                    </ul>
                                    <p>抽奖时间 AM3:30</p>
                                </div>
                                <!-- /中奖名单 -->
                            </div>
                        </div>
                        <div class="or3"></div>
                        <div class="or4"></div>
                    </div>
                    <!-- /金喜2 -->

                    <div class="contact">
                        <h2>发微博有“金喜”</h2>
                        <div class="cont">
                            <div class="weibo">
                                <div class="intro">
                                    <div class="pic">
                                        <a href="#" class="logo-jblm"></a>
                                        <a href="#" class="btn-addfollow"></a>
                                    </div>
                                    <div class="desc">
                                        <p>奥运到来，转发微博与你一起共贺“金”喜，微博含<a href="#">#跨品牌消费积金币 0额外花费得好礼#</a>分享活动，有“金”喜！</p>
                                        <p class="tips">请在以下版块发布微博参与活动，或关注金币联盟官方微博活动详情</p>
                                    </div>
                                </div>
                                <div class="weibo-post">
                                    <iframe src="http://www.baidu.com" frameborder="0" width="622" height="340"></iframe>
                                </div>
                            </div>
                            <!-- /新浪微博 -->
                        </div>
                        <div class="cooperation">
                            <div class="mod-s1">
                                <div class="hd"><h3>活动合作</h3></div>
                                <div class="bd">
                                    <ul>
                                        <li><a href="#"><img src="../img/client_logo.png" /></a></li>
                                        <li><a href="#"><img src="../img/client_logo.png" /></a></li>
                                        <li><a href="#"><img src="../img/client_logo.png" /></a></li>
                                        <li><a href="#"><img src="../img/client_logo.png" /></a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- /活动合作 -->

                            <div class="mod-s1">
                                <div class="hd"><h3>支持媒体</h3></div>
                                <div class="bd">
                                    <ul>
                                        <li><a href="#"><img src="../img/client_logo.png" /></a></li>
                                        <li><a href="#"><img src="../img/client_logo.png" /></a></li>
                                        <li><a href="#"><img src="../img/client_logo.png" /></a></li>
                                        <li><a href="#"><img src="../img/client_logo.png" /></a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- /支持媒体 -->
                        </div>
                        <!-- /合作方 -->
                    </div>
                </div>

                <div id="footer">
                    <div class="foot-links">
                        <a href="#">公司介绍</a> | <a href="#">服务网点查询</a> | <a href="#">客服中心</a> | <a href="#">免责声明</a> | <a href="#">服务条款</a> | <a href="#">联系我们</a>
                    </div>
                    <div class="copyright">
                        <p>CopyRight 2008 U-SYS Consulting & Information Technology Co.Ltd</p>
                        <p>优惠多Youhuiduo.net  粤ICP备06000716号  版权所有：广州优识资讯有限公司</p>
                    </div>
                </div>
                <!-- /尾部 -->
            </div>
        </div>

        <div class="share">分享到<a href="#" class="ico-qzone" title="分享到QZone">QZone</a><a href="#" class="ico-weibo" title="分享到新浪微博">新浪微博</a><a href="#" class="ico-tecent-weibo" title="分享到腾讯微博">腾讯微博</a><a href="#" class="ico-renren" title="分享到人人网">人人网</a><div class="bg"></div></div>
        <!-- /分享链接 -->
    </body>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/MSClass.js"></script>
    <script type="text/javascript">
    $(function(){

        var focusMarqueeControl = new Marquee(
        {
            MSClass   : ["focusPic","focusPicContent","focusPicTab"],
            Direction : 2,
            Step      : 4,
            Width     : 755,
            Height    : 393,
            Timer     : 20,
            DelayTime : 5000,
            WaitTime  : 2000,
            ScrollStep: 0,
            SwitchType: 2,
            AutoStart : true
        });

        var brandMarqueeControl=new Marquee(
        {
            MSClassID : "brandMarquee",
            ContentID : "brandMarqueeContent",
            Direction : 2,
            Step      : 0.1,
            Width     : 590,
            Height    : 150,
            Timer     : 20,
            DelayTime : 3000,
            WaitTime  : 2000,
            ScrollStep: 197,
            SwitchType: 0,
            AutoStart : 1
        });
        //跳过等待时间向右滚动后保持原向运动
        $("#brandPrev").live('click',function(){
            brandMarqueeControl.Run(3); 
            return false;
        });
        //跳过等待时间向左滚动后保持原向运动    
        $("#brandNext").live('click',function(){
            brandMarqueeControl.Run(2); 
            return false;
        });

        var eventMarqueeControl=new Marquee(
        {
            MSClassID : "eventsList",
            ContentID : "eventContent",
            Direction : 1,
            Step      : 0.1,
            Width     : 239,
            Height    : 239,
            Timer     : 20,
            DelayTime : 3000,
            WaitTime  : 2000,
            ScrollStep: 61,
            SwitchType: 0,
            AutoStart : 1
        });
        //跳过等待时间向右滚动后保持原向运动
        $("#eventPrev").live('click',function(){
            eventMarqueeControl.Run(3); 
            return false;
        });
        //跳过等待时间向左滚动后保持原向运动    
        $("#eventNext").live('click',function(){
            eventMarqueeControl.Run(2); 
            return false;
        });

        $(document).on('click',"#brandTabs li", function(){
            $(this).addClass("active").siblings().removeClass("active");
        });

        $(document).on('click',"#dateTabs span", function(){
            $(this).addClass("active").siblings().removeClass("active");
        });

        $(document).on('click',"#eventsList li", function(){
            $(this).addClass("active").siblings().removeClass("active");
        });

    });
    </script>
</html>
